<template>
  <main class="main-container">
    <el-table :data="tableData">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column prop="id" label="用户ID" width="100"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template #default="{ row }">
          <img :src="fileUrl + row.avatar" alt="" style="width: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      style="margin-top: 20px"
      v-model:current-page="queryParams.page"
      @current-change="getData"
    />
  </main>
</template>
<script setup lang="ts">
import { ref } from "vue";
import productService from "@/api/product";
import type { Order, Product, ProductResponse, User } from "@/api/types";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { fetchOrders } from "@/api/order";
import { getUsers } from "@/api/user";
const fileUrl = window.config.fileUrl;
const baseUrl = window.config.baseUrl;
const tableData = ref<User[]>([]);
const queryParams = {
  page: 1,
  limit: 10,
};
const total = ref(0);
const getData = async () => {
  let res = await getUsers(queryParams.page, queryParams.limit);
  tableData.value = res.data.users;
  total.value = res.data.totalCount;
};
getData();
</script>
<style scoped lang="less"></style>
